<!--
 * @Author: wys
 * @Date: 2021-07-08 13:25:52
 * @LastEditors: wys
 * @LastEditTime: 2021-07-08 14:21:08
 * @description: 验证码弹窗
 -->
<template>
  <view class="mode" v-if="showMode">
    <view class="mode-back" @click="modeClick()"></view>
    <view class="yzm-box" :style="'bottom:'+bottom+'px;'">
      <view class="title">请填写短信验证码：</view>
      <view class="phone">将发送到手机号：{{userInfo.mobile|mobileHide}}</view>
      <url-image src="/static/images/mine/close.png" width="34" height="34" class="close" @click="close()"></url-image>
      <view class="messageCodeShow">
        <view class="input-fixed">
          <view class="input-hide">
            <input ref="inputs" class="inputs" v-model="messageCode" type="number" maxlength="6" placeholder-class="input-holder" @input="codeInput" 
            @focus="focusIn()" @blur="blur()" :focus="focussing" :cursor-spacing="cursorSpacing" :adjust-position="true"
            />
          </view>
        </view>
        <view class="code-box height-fix">
          <view v-for="(item, key) in 6" :key="key" class="code-item">
            <text v-show="messageCode[key]">{{ messageCode[key] }}</text>
          </view>
        </view>
        <view class="code-box">
          <view v-for="(k, index) in 6" :key="index" class="code-box-line" :class="{'activity': index === messageCode.length&&focussing}"></view>
        </view>
      </view>
      <view v-if="getVerify === '重新获取验证码'" class="decorate blue" @click="again">重新获取验证码</view>
      <view v-else class="decorate"  @click="focussing=true"> {{ `${getVerify}s 后重新获取` }}   </view>
    </view>
  </view>
</template>

<script>
	export default {
    props:{
      // 点击背景是否关闭
      modeClose: { 
        type: Boolean,
        default: false,
      },
    },
		data() {
			return {
        showMode:false,//是否显示弹窗
				messageCode: '',//验证码
        getVerify:60,//倒计时
        focussing:true,//input是否聚焦
        timers:'',//定时器
        bottom:0,
        isIOS:false,
			}
		},
    filters:{
      mobileHide(value){
        if(value){
          let reg = /^(\d{3})\d{4}(\d{4})$/;
          let tel = value.replace(reg, "$1****$2");
          return tel;
        }
      }
    },
    computed:{
      //光标距离底部距离，解决键盘遮挡问题
      cursorSpacing(){
        return this.systemInfo.screenWidth / 750 * 110
      }
    },
    created() {
      // #ifdef H5
      let u = navigator.userAgent;
      let ua = u.toLowerCase();
      if (/iphone|ipad|ipod/.test(ua)){
        this.isIOS=true;
      }
      // #endif
    },
		methods: {
      blur(){
        this.focussing=false;
        this.bottom=0;
      },
      focusIn(){
        this.focussing=true;
        // #ifdef H5
          if (this.isIOS) { // iOS 系统
            setTimeout(()=>{
              window.scrollTo(0, document.body.scrollHeight);
            }, 10);
          }
        // #endif
      },
      // rpx转px
      rpxToPx(val) {
        return this.systemInfo.screenWidth / 750 * val
      },
      //显示弹窗
      show(){
        this.showMode=true;
        this.focusIn();
        this.$emit("show");
      },
      //关闭弹窗
      close(){
        this.messageCode="";
        this.showMode=false;
        this.getVerify=60;
        clearInterval(this.timers);
        this.$emit("close");
      },
      //重新发送验证码
      again(){
        this.$emit("again");
        this.focusIn();
      },
      //验证码输入6位成功，发送success，参数为验证码
      codeInput(e){
        if (e.detail.value.length !== 6) {
          return
        }
        if (this.isIOS){
          this.blur();
        }
        this.$emit("success",this.messageCode);//输入6位成功
      },
      //背景点击关闭
      modeClick(){
        if(this.modeClose){
          this.close();
        }
      },
      //验证码倒计时,在外部发送验证码成功后调用
      countDown(){
        this.getVerify=60;
        this.getVerify--;
        this.timers = setInterval(() => {
          this.getVerify--;
          if (this.getVerify <= 0) {
            clearInterval(this.timers)
            this.getVerify = '重新获取验证码';
          }
        }, 1000);
        this.$on('hook:deactivated', () => {
          clearInterval(this.timers);                                    
        });
      },
		}
	}
</script>

<style lang="scss" scoped>
.mode{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  // display: flex;
  // flex-direction:column-reverse;
  background-color: rgba(0,0,0,0.6);
  .mode-back{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .yzm-box{
    background-color: white;
    // position: relative;
    position: absolute;
    // bottom: 200;
    width: 100%;
    padding: 30rpx 28rpx;
    .title{
      font-size: 46rpx;
      font-family: PingFang SC;
    }
    .phone{
      font-size: 28rpx;
      color: #999999;
      margin-top: 20rpx;
    }
  }
  .close{
    position: absolute;
    top: 44rpx;
    right: 35rpx;
  }
}
.messageCodeShow{
  position: relative;
  padding-top: 80rpx;
  .input-fixed{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    .input-hide{
      width: 100%;
      height: 100%;
    }
    input{
      width: 200%;
      height: 100%;
      opacity: 0;
      color:transparent;
      text-indent: -999rpx;
      margin-left: -100%;
      text-shadow:0 0 0 red;
    }

  }
  .code-box{
    display: flex;
  }
  .height-fix{
    height: 80rpx;
    margin-bottom: -24rpx;
  }
  .code-item{
    width: 16.666%;
    margin-right: 40rpx;
    padding: 10rpx 0;
    text-align: center;
    line-height: 58rpx;
    font-size: 48rpx;
    &:nth-last-child(1) {
      margin-right: 0;
    }
  }
  .code-box-line{
    width: 16.666%;
    margin-right: 40rpx;
    text-align: center;
    border-bottom: none;
    &::after{
      content: "";
      display: inline-block;
      width: 72rpx;
      border-bottom: 2rpx solid #9a9a9a;
    }
    &:nth-last-child(1) {
      margin-right: 0;
    }
    &.activity::after{
      width: 72rpx;
      border-bottom: 4rpx solid #000;
      animation: sharking 2s linear infinite;
    }
    @keyframes sharking {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }
}
.decorate{
  margin-top: 38rpx;
  margin-bottom: 14rpx;
  font-size: 28rpx;
  color: #7B7B7B;
  text{
    color: #000;
    padding: 0 10rpx;
  }
  &.blue{
    color: #337EF8;
  }
}
</style>
